<template>
<div> 
    <div class="block">
        <span class="demonstration">页数较少时的效果</span>
        <ui-pagination layout="prev, pager, next" :total="50"> </ui-pagination>
      </div>
      <div class="block">
        <span class="demonstration">大于 7 页时的效果</span>
        <ui-pagination layout="prev, pager, next" :total="1000"> </ui-pagination>
      </div>

      <div class="block">
      <span class="demonstration">调整每页显示条数</span>
      <ui-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage2"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="100"
        layout="sizes, prev, pager, next"
        :total="1000">
      </ui-pagination>
    </div>

</div>
</template>

<script>
   export default {
    data:{
      currentPage2: 5,
    },
        name:  '',
        components: {},
   }
</script>

<style scoped>

</style>